import React from 'react'
import Banner from '../../components/banner/banner.js'
import {withRouter} from 'react-router-dom'
import { connect } from 'react-redux'
import action from '../../store/action/index.js'
import './home.less'

class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            msg: '首页',
            diffY: null,
            arr: [],
            start: null,
            end: null,
            date: 0,
            headdisplay: false
        }
    }
    render() {
        const routeInfo = require('../../router/routes.js')
        let {data_collection,data_purchases,data_vip}=this.props.data;
        let ViceRouter = routeInfo.default.filter(item => item.ViceRouter === true)
        return (
            <div className="Home_box"
                id="Home_box"
                onTouchStart={(e) => { this.touchStart(e) }}
                onTouchMove={(e) => { this.touchMove(e) }}
                onTouchEnd={(e) => { this.touchEnd(e) }}
                onScroll={(e) => { this.roll(e) }}
                ref={(HomeBox) => { this.HomeBox = HomeBox }}
            >
                {this.state.headdisplay ?
                    <div className="Home_head" ref={(HomeHead) => { this.HomeHead = HomeHead }}>
                        {
                                ViceRouter.map((item, index) => {
                                    return <div key={index} 
                                    onTouchStart={(e) => { this.goRouterHead(item.path,index,e) }} 
                                    onTouchEnd={()=>{ this.goRouter(item.path) }}
                                    className="Home_head_every"
                                    
                                    >
                                        <div className={item.icon} 
                                        style={{fontSize:`${0.7}rem`,textAlign:'center',lineHeight:'1.4rem',color:'rgb(179, 115, 19)'}}
                                        >
                                        </div>
                                        {/* <span>{item.name}</span> */}
                                    </div>
                                })
                            }
                    </div> : null}
                <div className="banners">
                    <Banner ref={(Banner) => { this.Banner = Banner }}></Banner>
                </div>
                {/* 首页热销，推荐商品 */}
                <div className="Home_content" style={{ position: "absolute" }}
                    ref={(HomeContent) => { this.HomeContent = HomeContent }}

                >
                    <div className="circle_2">
                        <div className="Home_nav" ref={(HomeNav)=>{this.HomeNav=HomeNav}}>
                            {
                                ViceRouter.map((item, index) => {
                                    return <div key={index} onClick={() => { this.goRouter(item.path) }}>
                                        <div className={item.icon}></div>
                                        <span>{item.name}</span>
                                    </div>
                                })
                            } 
                        </div>
                    </div>

                    <div className="Home_con">
                        {/*  榜首商品 */}
                        <div className="Home_con_recommend_main">
                            <h3 className="Home_con_recommend_title" style={{ fontSize: `${0.4}rem`, }}>
                                <span>榜首</span>
                                <i></i>
                            </h3>
                            <div className="Home_con_recommend">
                                {
                                    data_collection.map((item,index)=>{
                                        return <img key={item.commodity_id} src={item.commodity_images[1]} onClick={()=>{this.goItemdetail(item)}}/>
                                    })
                                }
                                
                            </div>
                        </div>
                        {/* 达人推荐 */}
                        <div className="Home_con_first_place_main">
                            <h3 className="Home_con_first_place_title" style={{ fontSize: `${0.4}rem`, }}>

                                <span> 达人推荐</span>
                                <i></i>
                            </h3>
                            <div className="Home_con_first_place">
                                {
                                    data_purchases.map((item,index)=>{
                                        return <img 
                                        key={item.commodity_id} src={index===0||2?item.commodity_images[1]:item.commodity_images[0]}
                                        onClick={()=>{this.goItemdetail(item)}} />
                                    })
                                }
                            </div>
                        </div>
                        {/* 会员专享 */}
                        {/* <div className="zw"></div> */}
                        <div className="Home_con_vip_main">
                            <h3 className="Home_con_vip_title" style={{ fontSize: `${0.4}rem`, }}>
                                <span>会员专享</span>
                                <i></i>
                            </h3>
                            <div className="Home_con_vip">
                                {
                                    data_vip.map((item,index)=>{
                                        return <div key={item.commodity_id}>
                                            <img src ={item.commodity_images[1]} />
                                                <div className="iconfont icon-shenqingchengweiVIP"></div>
                                            </div>
                                    })
                                }
                            </div>
                        </div>

                    </div>
                </div>
                <div className="zw"></div>
            </div>
        )
    }
    componentDidMount() {
        this.setState({ date: new Date().getHours() }, () => {
            console.log(new Date())
        })

        //     axios({
        //         url:"/api/front_end/purchases",
        //         method:"post",

        //     }).then(res=>{
        //             console.log(res)
        //         }).catch(err=>{
        //             console.log(err)
        //         })

    }
    //点击跳转详情
    goItemdetail = (ite) =>{
        sessionStorage.setItem("shop_id", JSON.stringify(ite.commodity_id));
        sessionStorage.setItem("shop_img", JSON.stringify(ite.commodity_images[1]));
        sessionStorage.setItem("shop_router", JSON.stringify('/home'));
        this.props.history.push('/itemdetail')
    }
    // 顶部隐藏导航
    roll = (e) => {
        // console.log(this.HomeHead)
        if (this.HomeBox.scrollTop > window.screen.width / 2 + 90) {
            this.setState({ headdisplay: true })
        } else {
                this.setState({ headdisplay: false })
            
        }
    }
    touchMove = (e) => {
        let { arr, start, diffY } = this.state
        if (this.HomeBox.scrollTop === 0) {
            diffY = e.touches[0].screenY - start
            if (diffY < 100 && diffY > 10) {
                // console.log(`${1}.${parseInt(diffY)}`,diffY)
                this.Banner.banner.style.transform = `scale(${1}.${parseInt(diffY)})`
                this.Banner.banner.style.transition = ' all 0.02s linear'
                // console.log(this.Banner.offsetWidth)
                this.HomeContent.style.top = `${55 + (diffY / 20)}vw`
            } else if (diffY < 10) {
                this.Banner.banner.style.transform = `scale(${1})`
            }
        }


    }
    touchStart = (e) => {
        this.setState({ start: e.touches[0].screenY }, () => {
            // console.log(this.state.start)
            console.log(window.screen.width)
        })
        // console.log(new Date())
    }
    touchEnd = (e) => {
        // console.log(e)
        // 
        // console.log(this.state.end)
        this.HomeBox.removeEventListener("touchmove", this.touchStart);
        this.HomeBox.removeEventListener("touchstart", this.touchStart);
        this.Banner.banner.style.transform = `scale(${1})`
        this.HomeContent.style.top = `${55}vw`

    }
    goRouter = (item) => {
        // console.log(item)
        this.props.history.push(item)
        // new LightPrompt().loading({
        //     str:'加载中',
        //     domId:'Home_box'
        // })
        // setTimeout(() => {
        //     new LightPrompt().success({
        //         str:'加载成功',
        //         domId:'Home_box',
        //         cleartime:2000
        //     })
        // }, 2000);
    }
    goRouterHead=(item,i,e)=>{
        // this.props.history.push(item)
        let divlist=document.querySelectorAll('.Home_head_every')
        divlist[i].style.boxShadow='2px 2px 2px 2px rgb(255, 255, 255)';
        divlist[i].style.transform='scale(0.9)'
    }
}
export default connect(state => state.Homedata,action.homedata)(withRouter(Home))